<template>
  <div class="iot-monitoring">
    <div class="title"></div>
    <div class="main">
      <div class="item">
        <p>物联网火警</p>
        <p>4702/53</p>
        <p>火警数/火警单位</p>
      </div>
      <div class="item">
        <p>物联网预警</p>
        <p>356/18</p>
        <p>预警数/预警单位</p>
      </div>
      <div class="item">
        <p>物联网隐患</p>
        <p>9/6</p>
        <p>隐患数/隐患单位</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';

defineComponent({ name: 'iotMonitoring' });
</script>

<style scoped lang="scss">
.iot-monitoring {
  @apply w-full;

  .title {
    @apply w-full h-[57px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply w-full h-[242px] mt-[10px] flex justify-between;

    .item {
      @apply w-[172px] h-full;

      &:first-child {
        background: url('./assets/hj.png') no-repeat center;
      }

      &:nth-child(2) {
        background: url('./assets/yj.png') no-repeat center;
      }

      &:last-child {
        background: url('./assets/yh.png') no-repeat center;
      }

      p:first-child {
        @apply mt-[40px] text-[18px] text-center;
      }

      p:nth-child(2) {
        @apply mt-[38px] text-[36px] leading-[36px] text-center font-bold;
        font-family: D-DIN-PRO;
      }

      p:last-child {
        @apply mt-[25px] text-[16px] leading-[16px] text-center;
      }
    }
  }
}
</style>
